// 单行注释
/* 
  多行注释
  快捷键：alt + shift + a
*/

console.log('h2.js成功加载...');
// document.getElementById(id值)
// 表示获取html页面里面id属性为id值的元素
let div1 = document.getElementById('div1');
console.log('页面上id为div1的元素', div1);

// 元素.innerHTML = 新内容
// 可以将元素里面的内容替换成新内容
// 不推荐使用，但是非常的方便
div1.innerHTML = '修改元素里面的内容';

// dom操控页面的完整api
let div2 = document.getElementById('div2');
// 创建html元素
// document.createElement('元素的标签名')
// 下面的代码就等同于页面上<input>
let ele1 = document.createElement('input');
// 设置属性，页面元素.setAttribute('属性名',属性值)
// 下面的代码等同 <input type="password">
ele1.setAttribute('type', 'password');
// 添加元素，下面的代码表示将ele1添加到div2里面
div2.append(ele1);

// 简单一个应用，通过循环生成年份的下拉选项
let selYear = document.getElementById('selYear');

for (let i = 1970; i <= 2024; i++) {
  let op = document.createElement('option');
  op.innerHTML = i + '年';
  op.setAttribute('value', i);
  selYear.append(op);
}

// 选择一个默认值
selYear.value = 2000;
